<template>
  <div>
    <div class="goodsbox">
      <div class="goodsphoto" @click="pickgoods">
        <img :src="goodsinfo.goods_image">
      </div>
      <div class="goodsinfo">
        <div class="name">
          <span>{{goodsinfo.goods_name}}</span>
          <span class="price">￥{{goodsinfo.sale_price}}</span>
        </div>
        <div class="sole">
          <span class="yishou">已售：{{goodsinfo.stock_amount}}</span>
          <div v-if="this.goods.goods_amount === 0">
            <van-icon name="shopping-cart" class="btn goodslist" @click="pickgoods"/>
          </div>
          <div class="btn btnn" v-else>
            <van-button size="mini" type="primary" color="#f93e2e" @click="delgoodsnum" :disabled="goodsList.goods_amount === 0">－</van-button>
            <span class="num">{{goods.goods_amount}}</span>
            <van-button size="mini" type="primary" color="#f93e2e" @click="addgoodsnum" :disabled="goodsList.goods_amount === 99">＋</van-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 购买弹出层 -->
    <van-popup v-model="showtan" position="bottom" :style="{ height: '70%' }" round>
      <van-card
        desc="剩余666件"
        :centered="true"
        :thumb="goodsinfo.goods_image"
        @click="showphoto"
      >
        <span slot="title" class="price">{{goodsinfo.goods_name}} <br> ￥{{goodsinfo.sale_price}}</span>
      </van-card>
      <van-cell>
        <div>规格</div>
        <div>
          <van-tag plain type="primary" size="large">500g</van-tag>
        </div>
      </van-cell>
      <van-cell title="数量">
        <van-stepper v-model="goods.goods_amount" min="0" max="99" @change="changecar"/>
      </van-cell>
      <van-cell title="留言" is-link></van-cell>
      <van-cell title="邮件" is-link></van-cell>
      <van-cell title="日期" is-link></van-cell>
      <van-cell title="事件" is-link></van-cell>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      showtan: false,
      goods: {
        goods_id: this.goodsinfo.goods_id,
        goods_amount: 0,
        goods_price: this.goodsinfo.sale_price,
        goodsname: this.goodsinfo.goods_name,
        goods_image: this.goodsinfo.goods_image
      }
    }
  },
  props: {
    goodsinfo: {
      type: Object,
      required: true
    }
  },
  created () {
    this.loadcar()
  },
  mounted () {

  },
  computed: {
    ...mapState(['goodsList'])
  },
  watch: {
    // goodsList(val) {
    //   this.loadcar()
    // }
  },
  methods: {
    loadcar() {
      // console.log(123)
      this.goodsList.forEach(item => {
        if (item.goods_id === this.goods.goods_id) {
          this.goods.goods_amount = item.goods_amount
        }
      })
    },
    // 选购商品
    pickgoods() {
      this.showtan = true
    },
    addgoodsnum() {
      this.goods.goods_amount += 1
      // this.changecar()
    },
    delgoodsnum() {
      this.goods.goods_amount -= 1
      // this.changecar()
    },
    // 购物车商品
    changecar() {
      // 查询购物车是否有这个商品
      const youma = this.goodsList.find(x => x.goods_id === this.goods.goods_id)
      if (!youma) {
        // 没有就加入购物车
        this.goodsList.push(this.goods)
      } else {
        // 有就修改
        // 查询该商品的index值
        const index = this.goodsList.indexOf(youma)
        // 如果商品数量不为0，修改该商品规格
        this.goodsList[index] = this.goods
        // 判断该商品数量是否为0，为0就删除
        if (this.goods.goods_amount === 0) {
          this.goodsList.splice(index, 1)
        }
      }
    },
    showphoto() {
      ImagePreview([
        this.goodsinfo.goods_image
      ])
    }
  }
}
</script>

<style scoped lang="less">
.goodsbox {
  width: 100%;
  height: 330px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background-color: eee;
  .goodsphoto {
    width: 100%;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .goodsinfo {
    width: 100%;
    height: 130px;
    padding-bottom: 10px;
    box-sizing: border-box;
    .name {
      display: flex;
      height: 70px;
      box-sizing: border-box;
      justify-content: space-between;
      padding: 10px 20px;
      font-size: 30px;
      .price {
        color: red;
      }
    }
    .sole {
      position: relative;
      height: 60px;
      line-height: 60px;
      .btn {
        position: absolute;
        top: 0;
        right: 0;
        width: 180px;
        height: 40px;
        .num {
          font-size: 35px;
          margin: 0 20px;
        }
      }
      .btnn {
        top: -10px;
      }
      .shopcar {
        width: 80px;
        font-size: 40px;
        color: #f93e2e;
      }
    }
  }
  .yishou {
    font-size: 30px;
  }
  .goodslist {
    color: red;
    font-size: 40px;
    text-align: center;
    width: 50px;
  }
}
  .van-tag {
  margin: 10px 10px 0 0;
}
.van-popup {
  padding-top: 20px;
}
.van-card {
  background-color: #fff;
}
.price {
  font-size: 40px;
  // color: red;
}
</style>
